<!--
 * @company : 版权所属 四川北星惯牌科技有限公司
 * @contact : 刘经理 19326416371
 -->
<template>
	<view class="review-item">
		<view class="review-user flex-row-center">
			<view class="user-left flex-row-center">
				<up-image :src="commentInfo.avatar" v-if="commentInfo.avatar" :errorIcon="errImg" width="68rpx"
					height="68rpx" shape="circle"></up-image>
				<image :src="errImg" v-else class="ava round" mode="aspectFill"></image>
				<!-- <image :src="commentInfo.avatar" class="ava round" mode="aspectFill"></image> -->
				<text class="user-name">{{commentInfo.nickname}}</text>
				<view class="lv-box flex-row-center">
					<image :src="commentInfo.vip_icon" class="lv-icon" mode=""></image>
					<text class="lv">{{commentInfo.vip_name}}</text>
				</view>
			</view>
			<text class="date">{{commentInfo.ct_date}}</text>
		</view>
		<view class="review-content">
			<text class="review-text">{{commentInfo.content}}</text>

			<view class="review-img">
				<image @click="previewImage(commentInfo.imageList,index)" :src="item"
					v-for="(item,index) in commentInfo.imageList" :key="index" class="img" mode="aspectFill">
				</image>
			</view>
			<view class="review-footer flex-row-center">
				<view>
					<text class="statistics" v-if="commentInfo.join_count">组队{{commentInfo.team_count}}次</text>
				</view>
				<view class="review-btn flex-row-center">
					<!-- 	<view class="flex-row-center">
						<up-icon name="chat" color="#DEDEDE" size="34rpx"></up-icon>
						<text class="text">评论</text>
					</view> -->
					<template v-if="commentInfo.is_delete==1">
						<up-icon @click="delComment" name="trash" color="#DEDEDE" size="34rpx"></up-icon>
					</template>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	const modalShow = ref(false);
	const props = defineProps({
		commentInfo: {
			default: {}
		}
	});
	import {
		configInfoStore
	} from '@/stores/config.js';
	const emit = defineEmits(['delComment']);
	const commentInfo = ref(computed(() => props.commentInfo));
	const {
		configInfo
	} = configInfoStore();
	const errImg = ref(computed(() => configInfo.user_default_avatar?.value))
	const previewImage = (list, index) => { //预览图片
		previewImg(list, index);
	}
	const delComment = (item) => {
		uni.showModal({
			title: '提示',
			content: '确定删除此评论？',
			success: async (res) => {
				if (res.confirm) {
					const res = await $Api.group.delComment({
						tid: commentInfo.value.tuc_id
					});
					if (res.code == 1) {
						uni.showToast({
							title: '删除成功'
						})
						setTimeout(() => {
							emit('delComment', commentInfo.value.tuc_id)
						}, 600)
					} else {
						uni.$u.toast(res.msg)
					}
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}

		})
	}
</script>

<style lang="scss" scoped>
	.review-item {
		// &:nth-of-type(n+1) {
		// }
		margin-bottom: 20rpx;
	}

	.review-user {
		justify-content: space-between;

		.ava {
			width: 68rpx;
			height: 68rpx;
			// margin-right: 18rpx;
		}

		.user-name {
			max-width: 188rpx;
			font-weight: 500;
			font-size: 34rpx;
			color: rgba(255, 255, 255, 0.87);
			text-overflow: ellipsis;
			white-space: nowrap;
			lines: 1;
			overflow: hidden;
			margin-left: 18rpx;
		}

		.lv-box {
			margin: 0 54rpx 0 8rpx;

			.lv-icon {
				width: 44rpx;
				height: 38rpx;
				margin-right: 4rpx;
			}

			.lv {
				font-weight: bold;
				font-size: 20rpx;
				color: #FFE4A3;
			}
		}

		.date {
			font-weight: 500;
			font-size: 24rpx;
			color: #999999;
		}
	}

	.review-content {
		width: 100%;
		box-sizing: border-box;
		padding: 20rpx;
		background-color: #222528;
		margin-top: 16rpx;

		.review-text {
			font-weight: 500;
			font-size: 28rpx;
			color: #DBDDDE;
			line-height: 33rpx;
			word-break: break-all
		}

		.review-img {
			width: 100%;
			margin-top: 16rpx;
			display: grid;
			// grid-template-columns: auto auto auto;
			grid-template-columns: repeat(3, 1fr);
			gap: 8rpx;

			.img {
				width: 218rpx;
				height: 196rpx;
				border-radius: 8rpx
			}
		}
	}

	.review-footer {
		justify-content: space-between;
		margin-top: 24rpx;

		.statistics {
			font-weight: 500;
			font-size: 24rpx;
			color: #999999;
		}

		.review-btn {
			.text {
				font-weight: 500;
				font-size: 24rpx;
				color: #DEDEDE;
				margin-left: 6rpx;

			}
		}
	}
</style>